<template>
	<div>
		<leftNav :currentPath="'ac_mine'"></leftNav>
		<div class="js-copy js-content pd_body">
			<div class="ac_organ mine_content_right">
				<acRefund
					:item="item"
					v-if="showTips"
					@close="tipClose()"
					@refundSure="refundSure"
				>
				</acRefund>
				<div class="ac_organ_header">
					<span>我參加的活動</span>
				</div>
				<div class="ac_organ_status">
					<div
						class="ac_organ_status_item"
						:class="{ ac_organ_status_item_sel: selStatusIndex == 0 }"
						@click="selStatusClick(0)"
					>
						全部
					</div>
					<div
						class="ac_organ_status_item"
						:class="{ ac_organ_status_item_sel: selStatusIndex == 1 }"
						@click="selStatusClick(1)"
					>
						已报名活动
					</div>
					<div
						class="ac_organ_status_item"
						:class="{ ac_organ_status_item_sel: selStatusIndex == 2 }"
						@click="selStatusClick(2)"
					>
						已结束活动
					</div>
					<!-- <div
						class="ac_organ_status_item"
						:class="{ ac_organ_status_item_sel: selStatusIndex == 3 }"
						@click="selStatusClick(3)"
					>
						退费中
					</div> -->
				</div>
				<div class="mywz_publish_line"></div>

				<div class="ac_organ_list">
					<div class="ac_organ_list_header" v-if="localLanguage == 2">
						{{
							selStatusIndex == 0
								? acList.length
								: selStatusIndex == 1
								? acStartList.length
								: selStatusIndex == 2
								? acEndList.length
								: acBackList.length
						}}
						events in total
					</div>
					<div class="ac_organ_list_header" v-if="localLanguage != 2">
						共
						{{
							selStatusIndex == 0
								? acList.length
								: selStatusIndex == 1
								? acStartList.length
								: selStatusIndex == 2
								? acEndList.length
								: acBackList.length
						}}
						场活动</div
					>
					<div class="ac_organ_list_content">
						<div
							v-for="(item, index) in selStatusIndex == 0
								? acList
								: selStatusIndex == 1
								? acStartList
								: selStatusIndex == 2
								? acEndList
								: acBackList"
							:key="index"
						>
							<acItem
								:item="item"
								:type="1"
								@gotoDetail="gotoDetail"
								@refund="refund"
								@cancelOrder="cancelOrder"
								@continueOrder="continueOrder"
							>
							</acItem>
						</div>
					</div>
				</div>
			</div>
			<bottom></bottom>
		</div>
	</div>
</template>

<script>
import {
	acitvityMyLists,
	orderUpdate,
	orderCheck,
	orderCancel,
} from "@/api/home";
import topHeader from "../../components/pc/topHeader2.vue";
import bottom from "../../components/pc/bottom.vue";
import acItem from "./ac_item.vue";
import acRefund from "./ac_refund.vue";
import { getUserId } from "@/utils/auth";
import { getToken } from "@/utils/auth";
import { loadStripe } from "@stripe/stripe-js";
import { newBus } from "../../components/pc/topHeader2.vue";
import leftNav from "../my/leftNav.vue";

export default {
	name: "",
	components: {
		topHeader,
		bottom,
		acItem,
		acRefund,
		leftNav,
	},
	data() {
		return {
			selStatusIndex: 0,
			page: 1,
			showTips: false,
			size: 25,
			acList: [],
			acStartList: [],
			acEndList: [],
			acBackList: [],
			item: {},
			localLanguage: 0,
		};
	},
	created() {
		const hasToken = getToken();
		console.log(hasToken);
		if (hasToken) {
			this.getACList({ userid: getUserId() });
		} else {
			this.$router.push({ path: "/" });
		}
	},
	mounted() {
		newBus.$on("global-notification", (data) => {
			let localLanguage = sessionStorage.getItem("localLanguage");
			if (localLanguage == "繁体中文") {
				this.localLanguage = 1;
			} else if (localLanguage == "english") {
				this.localLanguage = 2;
			} else {
				this.localLanguage = 0;
			}
		});
		let localLanguage = sessionStorage.getItem("localLanguage");
		if (localLanguage == "繁体中文") {
			this.localLanguage = 1;
		} else if (localLanguage == "english") {
			this.localLanguage = 2;
		} else {
			this.localLanguage = 0;
		}
	},
	methods: {
		showBannerDetail(id) {
			this.$router.push({
				path: "/ac_create",
			});
		},
		gotoDetail(item) {
			this.$router.push({
				name: "/ac_detail",
				params: { id: item.id },
			});
		},

		cancelOrder(item) {
			this.loading = true;
			orderCancel({ id: item.ticket_id })
				.then((res) => {
					this.loading = false;
					if (res.code == 200) {
						this.$message({ message: res.message, type: "success" });
						this.getACList({ userid: getUserId() });
					} else {
						this.getACList({ userid: getUserId() });
						this.$message({ message: res.message, type: "error" });
					}
				})
				.catch((error) => {
					this.loading = false;
					this.getACList({ userid: getUserId() });
					if (type == 1) {
						this.$message({ message: error.message, type: "error" });
					}
				});
		},

		continueOrder(item) {
			this.buyTicket(item, 1);
		},
		async buyTicket(item, type) {
			const stripe = await loadStripe(
				"pk_live_51PYrHdEQq0jGyNkS55zMD21yxNNrl2pZU9nlo2IxhgKcbEgVWQGRyjWhB3pEzzgrDwTxohG54aairByrxCqIg32g00gWroSP0b"
			); // 替换为你的Publishable Key

			this.loading = true;
			orderCheck({ id: item.ticket_id })
				.then((res) => {
					this.loading = false;
					if (res.code == 200) {
						stripe.redirectToCheckout({
							sessionId: res.data.ticket_session_id,
						});
						this.getACList({ userid: getUserId() });
					} else {
						this.getACList({ userid: getUserId() });
						if (type == 1) {
							this.$message({ message: res.message, type: "error" });
						}
					}
				})
				.catch((error) => {
					this.loading = false;
					this.getACList({ userid: getUserId() });
					if (type == 1) {
						this.$message({ message: error.message, type: "error" });
					}
				});
		},
		refund(item) {
			this.item = item;
			this.showTips = true;
		},
		tipClose() {
			this.showTips = false;
		},
		refundSure(data) {
			this.loading = true;
			orderUpdate(data)
				.then((res) => {
					this.loading = false;
					if (res.code == 200) {
						this.showTips = false;
						this.getACList({ userid: getUserId() });
					} else {
						this.$message({ message: res.message, type: "error" });
					}
				})
				.catch((error) => {
					this.loading = false;
					this.$message({ message: error.message, type: "error" });
				});
		},
		selStatusClick(index) {
			this.selStatusIndex = index;
		},
		getACList(obj) {
			acitvityMyLists(obj)
				.then((res) => {
					if (res.code == 200) {
						this.loading = false;
						this.acList = res.data;
						this.acStartList = [];
						this.acEndList = [];
						this.acBackList = [];
						for (let i = 0; i < this.acList.length; i++) {
							const item = this.acList[i];
							if (item.ticket_status == 2 || item.ticket_status == 3) {
								this.acBackList.push(item);
							} else {
								if (item.startStatus == 2) {
									this.acEndList.push(item);
								} else {
									this.acStartList.push(item);
								}
							}
						}

						console.log(this.acStartList);
					} else {
						this.$message({ message: res.message, type: "error" });
					}
				})
				.catch((error) => {
					this.$message({ message: error.message, type: "error" });
				});
		},
	},
};
</script>
<style scoped>
@import url("../../../src/assets/person.css");
.pd_body {
	height: 100vh;
	overflow-y: scroll;
}
.scroll-container {
	height: 100vh;
	overflow-y: scroll;
}
.js-copy {
	margin-top: 100px;
	width: calc(100vw);
	margin: 0 auto;
}
.ac_organ {
	/* margin-left: 10%;
	width: 80%; */
}
</style>

<style scoped>
.ac_organ_header {
	margin-top: 80px;
	display: flex;
}

.ac_organ_header img {
	width: 24px;
	height: 24px;
}

.ac_organ_header span {
	font-size: 24px;
	font-weight: bold;
	line-height: 24px;
	letter-spacing: 0em;
	font-variation-settings: "opsz" auto;
	/* 纯白 */
	color: #ffffff;
}
.mywz_publish_line {
	width: 100%;
	height: 1px;
	opacity: 0.2;
	background: #d8d8d8;
}
</style>

<!-- ac_organ_status -->
<style scoped>
.ac_organ_status {
	margin-top: 30px;
	display: flex;
	height: 50px;
	flex-wrap: nowrap; /* 禁止换行，确保横向排列 */
	overflow-x: auto; /* 如果内容超出屏幕宽度，允许横向滚动 */
	white-space: nowrap; /* 防止内容换行 */
}

.ac_organ_status_item_sel {
	/* 333 */
	background: rgba(239, 245, 254, 0.1);
}

.ac_organ_status_item {
	border-radius: 10px;
	opacity: 1;
	height: 33px;
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: 16px;
	font-weight: normal;
	line-height: 16px;
	align-content: center;
	text-align: center;
	align-items: center;
	letter-spacing: 0em;
	padding-left: 20px;
	padding-right: 20px;
	font-variation-settings: "opsz" auto;
	color: #fff;
	margin-right: 20px;
	flex: 0 0 auto; /* 禁止拉伸，宽度由内容决定 */
}
</style>

<!-- ac_organ_list -->
<style scoped>
.ac_organ_list {
	margin-top: 40px;
	min-height: 80vh;
}
.ac_organ_list_header {
	font-family: "PingFang SC", "微软雅黑", "Helvetica Neue", "Hiragino Sans GB",
		"Microsoft YaHei", Arial, sans-serif;
	font-size: 18px;
	font-weight: normal;
	line-height: 14px;
	letter-spacing: 0em;

	/* 三级颜色 */
	color: #ffffff;
}

.ac_organ_list_content {
	margin-top: 20px;
	opacity: 1;
}
</style>

<style scoped>
@media screen and (max-width: 900px) {
	.ac_organ {
		margin-left: 5%;
		width: 90%;
	}
	.ac_organ_header {
		margin-top: 40px;
	}
	.ac_organ_list {
		margin-top: 20px;
	}
}
</style>
